<template>
  <section class="home">
    <van-swipe :autoplay="3000" lazy-render :show-indicators="false">
      <van-swipe-item v-for="(image, index) in bannerList" :key="index">
        <img :src="image" class="img" />
      </van-swipe-item>
    </van-swipe>
    <section class="home-application padding">
      <p class="title">
        <span>适用领域</span>
        <span>APPLICABLE FIELDS</span>
      </p>
      <ul>
        <li v-for="(item, index) in application" :key="index" @click="handleLook(index)">
          <img :src="item" class="img" lazy-load />
        </li>
      </ul>
    </section>
    <section class="home-aboutUs padding">
      <p class="title">
        <span>关于我们</span>
        <span>ABOUT US</span>
      </p>
      <img src="@/assets/images/home/Frame245.png" lazy-load class="img" />
      <p class="aboutUs-title">
        <span>公司简介</span>
        <span></span>
        <span>艾瑞斯生物技术（深圳）有限公司</span>
      </p>
      <p
        class="aboutUs-des"
      >艾瑞斯是一家拥有虹膜识别核心技术和完全自主知识产权的国家级高新技术企业，专注于从事生物特征识别技术研究。公司致力于为行业用户提供生物特征识别技术和解决方案，并构建超大规模的安全身份认证系统 。是国内专业从事信息安全保密、虹膜生物特征识别的信息科技研究公司。</p>
      <ul>
        <li>
          <span>2000＋</span>
          <span>服务企业客户</span>
        </li>
        <li>
          <span>260座</span>
          <span>城市</span>
        </li>
        <li>
          <span>150＋</span>
          <span>扩展全行业</span>
        </li>
      </ul>
      <p class="aboutUs-btn">
        <span @click="goAboutUs">查看详情</span>
      </p>
    </section>
    <section class="home-information padding">
      <p class="title">
        <span>新闻资讯</span>
        <span>NEWS INFORMATION</span>
      </p>
      <ul>
        <li v-for="(item, index) in newsList" :key="index">
          <img :src="item.img" lazy-load class="img" />
          <p>{{item.title}}</p>
          <p>{{item.desc}}</p>
          <p>
            <span @click="detail(index)">查看详情</span>
            <span>{{item.time}}</span>
          </p>
        </li>
      </ul>
    </section>
    <section class="home-cooperation padding">
      <p class="title">
        <span>合作伙伴</span>
        <span>COOPERATIVE PARTNER</span>
      </p>
      <ul>
        <li v-for="(item, index) in cooperationList" :key="index">
          <p>{{item.name}}</p>
          <div>
            <img :src="v" class="img" v-for="(v, inde) in item.list" :key="inde" />
            <p class="palceholder" v-if="index == 1"></p>
          </div>
        </li>
      </ul>
    </section>
  </section>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { reactive } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const router = useRouter()
// 获取本地图片
const getImage = (name: string) => {
  return new URL(`../../assets/images/home/${name}`, import.meta.url).href
}
let bannerList = reactive([
  new URL(`../../assets/images/home/banner1.jpg`, import.meta.url).href,
  new URL(`../../assets/images/home/banner2.jpg`, import.meta.url).href,
  new URL(`../../assets/images/home/banner3.jpg`, import.meta.url).href,
])
let application = reactive([
  new URL(`../../assets/images/home/Component81.png`, import.meta.url).href,
  new URL(`../../assets/images/home/Component77.png`, import.meta.url).href,
  new URL(`../../assets/images/home/Component78(1).png`, import.meta.url).href,
  new URL(`../../assets/images/home/Component80.png`, import.meta.url).href,
])
let newsList = reactive([
  {
    img: new URL(`../../assets/images/home/1.png`, import.meta.url).href,
    title: '国际知名手机商家推出虹膜识别手机？',
    desc: '#虹膜识别#技术从出现再到发展至今，虽然虹膜识别技术在安全系数等很多方面拥有很多独一无二的优势，但是在一些我们生活中比较近的身份认证设...',
    time: '2021.11.19',
  },
  {
    img: new URL(`../../assets/images/home/2.png`, import.meta.url).href,
    title: '艾瑞斯受邀参加第三届中韩贸易投资博览会',
    desc: '一家刚成立的外资公司却成立各地政府的香饽饽！成立不到一个月竟然跻身在500强的队伍中，受邀参加第三届中韩贸易投资博览会...',
    time: '2021.11.12',
  },
  {
    img: new URL(`../../assets/images/home/3.png`, import.meta.url).href,
    title: '艾瑞斯提供最佳防伪造系统',
    desc: '相互不同的虹膜被误认为是相同的数学概率极低，在10亿人以上的数据中，进行本人身份验证时只需1秒...',
    time: '2019.04.08',
  },
])
let cooperationList = reactive([
  {
    name: '政府、医院及银行单位',
    list: [
      new URL(
        `../../assets/images/home/cooperation/Frame247.png`,
        import.meta.url
      ).href,
      new URL(
        `../../assets/images/home/cooperation/Frame247-1.png`,
        import.meta.url
      ).href,
      new URL(
        `../../assets/images/home/cooperation/Frame248.png`,
        import.meta.url
      ).href,
      new URL(
        `../../assets/images/home/cooperation/Frame249.png`,
        import.meta.url
      ).href,
      new URL(
        `../../assets/images/home/cooperation/Frame251.png`,
        import.meta.url
      ).href,
      new URL(
        `../../assets/images/home/cooperation/Frame252.png`,
        import.meta.url
      ).href,
      new URL(
        `../../assets/images/home/cooperation/Frame253.png`,
        import.meta.url
      ).href,
      new URL(
        `../../assets/images/home/cooperation/Frame337.png`,
        import.meta.url
      ).href,
      new URL(
        `../../assets/images/home/cooperation/Frame338.png`,
        import.meta.url
      ).href,
      new URL(
        `../../assets/images/home/cooperation/Frame339.png`,
        import.meta.url
      ).href,
    ],
  },
  {
    name: '企业合作伙伴',
    list: [
      new URL(`../../assets/images/home/cooperation/1.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/2.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/3.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/4.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/5.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/6.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/7.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/8.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/9.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/10.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/11.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/12.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/13.png`, import.meta.url)
        .href,
      new URL(`../../assets/images/home/cooperation/14.png`, import.meta.url)
        .href,
    ],
  },
])
const handleLook = (index: number) => {
  store.dispatch('setApplyIndex', index)
  router.push({ name: 'ApplyField' })
}
const goAboutUs = () => {
  router.push({ name: 'AboutUs' })
}
const detail = (index: number) => {
  store.dispatch('setNewsIndex', index)
  store.dispatch('setIsShow', false)
  router.push({ name: 'News' })
}
</script>

<style lang="scss" scoped>
.home {
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  position: relative;
  .title {
    display: flex;
    flex-direction: column;
    span {
      font-size: 44px;
      font-family: Source Han Sans CN, Source Han Sans CN-Bold;
      font-weight: 700;
      color: #2087e3;
      &:last-child {
        font-size: 24px;
        font-family: DIN, DIN-Bold;
        color: #cdcdcd;
        margin-top: 6px;
      }
    }
  }
  .padding {
    padding: 60px 24px;
  }
  &-application {
    img {
      width: 341px;
      height: 426px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 50px;
      li {
        margin-top: 20px;
      }
    }
  }
  &-aboutUs {
    background: url('@/assets/images/home/Group-282-(1).png') 0 0 no-repeat;
    background-size: 100% 100%;
    color: #fff;
    position: relative;
    img {
      margin: 60px 0 40px;
    }
    .aboutUs {
      &-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32px;
        font-family: Source Han Sans CN, Source Han Sans CN-Bold;
        font-weight: 700;
        span {
          &:nth-child(2) {
            width: 8px;
            height: 8px;
            background-color: #ffffff;
            border-radius: 50%;
          }
        }
      }
      &-des {
        font-size: 28px;
        line-height: 48px;
        margin: 40px 0 46px;
      }
      &-btn {
        display: flex;
        justify-content: flex-end;
        span {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 202px;
          height: 76px;
          background-color: #2087e3;
          border-radius: 14px 0px 14px 0px;
          margin-top: 60px;
        }
      }
    }
    ul {
      display: flex;
      justify-content: space-between;
      li {
        display: flex;
        flex-direction: column;
        font-size: 28px;
        font-weight: 700;
        span {
          &:first-child {
            font-size: 36px;
            color: #2087e3;
            margin-bottom: 24px;
          }
        }
      }
    }
  }
  &-information {
    ul {
      li {
        margin-top: 60px;
        padding-bottom: 40px;
        border-bottom: 1px solid #cdcdcd;
        p {
          font-size: 28px;
          color: #686868;
          &:nth-of-type(1) {
            font-size: 32px;
            font-family: Source Han Sans CN, Source Han Sans CN-Bold;
            font-weight: 700;
            color: #333333;
            margin: 40px 0 20px;
          }
          &:nth-of-type(2) {
            line-height: 48px;
          }
          &:nth-of-type(3) {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
          }
        }
      }
    }
  }
  &-cooperation {
    padding-bottom: 80px !important;
    background: url('@/assets/images/home/Group-163.png') 0 0 no-repeat;
    background-size: 100% 100%;
    .title {
      margin-bottom: 60px;
    }
    ul {
      color: #fff;
      font-size: 28px;
      p {
        margin: 40px 0 20px;
      }
      div {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .palceholder,
      img {
        width: 224px;
        height: 92px;
        margin-top: 20px;
      }
    }
  }
}
</style>